<script setup lang="ts">
defineProps<{
  isCollapse: boolean
}>()
</script>

<template>
  <el-aside width="auto">
    <el-menu default-active="/" class="el-menu-vertical-demo" :collapse="isCollapse" router>
      <el-menu-item index="/">
        <el-icon-house />
        <span>首页</span>
      </el-menu-item>
      <el-menu-item index="/chooseIcon">
        <el-icon-select />
        <span>图标选择器</span>
      </el-menu-item>
      <el-menu-item index="/chooseArea">
        <el-icon-locationinformation />
        <span>省市区选择</span>
      </el-menu-item>
      <el-menu-item index="/trend">
        <el-icon-arrowup />
        <span>趋势标记</span>
      </el-menu-item>
      <el-menu-item index="/notify">
        <el-icon-bellfilled />
        <span>通知菜单</span>
      </el-menu-item>
      <el-menu-item index="/menu">
        <el-icon-menu />
        <span>导航菜单</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

.el-menu {
  height: 100vh;

  .el-menu-item {
    display: flex;
    column-gap: 10px;
  }
}
</style>
